<template>
  <MyDialog
    v-model="isVisible"
    :type="type"
    class="audit-dialog-wrapper"
    width="1200"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <my-form
      ref="ruleForm"
      v-model="dataForm"
      label-width="120px"
      :disabled="currentRow.type === 'detail'"
      :model="dataForm"
      :rules="rules"
      :is-grid="false"
      :items-datas="state.itemsDatas"
    >
    </my-form>
    <template #footer>
      <my-button type="reset" title="关闭" @click="closed" />
      <my-button v-if="currentRow.type !== 'detail'" type="save" title="保存" :loading="buttonLoading" @click="submitForm" />
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { addAb04, getAb04, updateAb04 } from '@/api/yuanshidian/ab04';
import { dwnamelist } from '@/api/yuanshidian/ab01';
import { sfzlist } from '@/api/yuanshidian/ab02';
const { proxy } = getCurrentInstance();
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '弹窗标题'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const reg = ref(
  /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
);
const validateCode = (rule, value, callback) => {
  if (!reg.value.test(value)) {
    callback(new Error('请输入正确的证件号码'));
  } else {
    callback();
  }
};
const buttonLoading = ref(false);
const ruleForm = ref<ElFormInstance>();
const state = reactive({
  dataForm: {
    id: '',
    aaa027: '431199',
    dw01: '',
    gr03: '',
    gr04: '',
    grmx01: '',
    grmx02: '',
    grmx03: '',
    gr18: '',
    gr19: '',
    grmx04: '',
    grmx05: '',
    dw14: '',
    cs03: '',
    dw02: '',
    gr02: '',
    systime: '',
    dw24: '',
    grjx01: '',
    jfStarttime: '',
    jfEndtime: ''
  },
  rules: {
    dw01: [{ required: true, message: '请输入', trigger: 'blur' }],
    gr02: [
      { required: true, message: '请输入', trigger: 'blur' },
      { validator: validateCode, trigger: 'blur' }
    ],
    // gr01: [{ required: true, message: '请输入', trigger: 'blur' }],
    gr07: [{ required: true, message: '请选择', trigger: 'blur' }],
    gr08: [{ required: true, message: '请选择', trigger: 'blur' }],
    gr09: [{ required: true, message: '请输入', trigger: 'blur' }]
  },
  itemsDatas: [
    { label: '统筹区编码', prop: 'aaa027', type: 'input', disabled: true },
    {
      label: '单位编号',
      prop: 'dw01',
      type: 'input',
      events: {
        change: async (v) => {
          dataForm.value.dw02 = '';
          if (v) {
            const name = await dwnamelist({ dw01: v });
            if (name.length > 0) {
              dataForm.value.dw02 = name[0].dw02;
            }
          }
        }
      }
    },
    { label: '单位名称', prop: 'dw02', type: 'input', disabled: true },
    {
      label: '职工证件号码',
      prop: 'gr02',
      type: 'input',
      events: {
        change: async (v) => {
          if (v) {
            const userInfo = await sfzlist({ gr02: v });
            if (userInfo.data.gr02) {
              dataForm.value.gr04 = userInfo.data.gr04;
              dataForm.value.gr03 = userInfo.data.gr03;
            }
          }
        }
      }
    },
    { label: '姓名', prop: 'gr04', type: 'input', disabled: true },
    { label: '个人账号', prop: 'gr03', type: 'input', disabled: true },
    { label: '状态', prop: 'grmx01', type: 'input' },
    { label: '缴费月度', prop: 'grmx02', type: 'input' },
    { label: '缴费时间', prop: 'grmx03', type: 'date', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
    { label: '上年工资', prop: 'gr18', type: 'input' },
    { label: '个人缴费基数', prop: 'gr19', type: 'input' },
    { label: '单位转化额', prop: 'grmx04', type: 'input' },
    { label: '单位代缴额', prop: 'grmx05', type: 'input' },
    { label: '单位平均工资', prop: 'dw14', type: 'number', min: 0, controls: false },
    { label: '单位缴费比例', prop: 'cs03', type: 'number', min: 0, controls: false },
    { label: '操作员代码', prop: 'dw24', type: 'input' },
    { label: '系统时间', prop: 'systime', type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
    { label: '计息年度', prop: 'grjx01', type: 'input' },
    { label: '缴费开始时间', prop: 'jfStarttime', type: 'date', valueFormat: 'YYYY-MM-DD' },
    { label: '缴费结束时间', prop: 'jfEndtime', type: 'date', valueFormat: 'YYYY-MM-DD' }
  ]
});
const { dataForm, rules } = toRefs(state);
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (props.currentRow.id && v) {
      var res = await getAb04(props.currentRow.id);
      Object.keys(dataForm.value).forEach((item) => {
        dataForm.value[item] = res.data[item];
      });
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['update:modelValue', 'handleQuery']);
const closed = () => {
  reset();
  emit('update:modelValue');
};
/** 表单重置 */
const reset = () => {
  ruleForm.value?.resetFields();
};

/** 提交按钮 */
const submitForm = () => {
  ruleForm.value?.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (dataForm.value.id) {
        await updateAb04(dataForm.value).finally(() => (buttonLoading.value = false));
      } else {
        await addAb04(dataForm.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      reset();
      emit('handleQuery');
      closed();
    }
  });
};
</script>
